<template>
  <div style="width: 100%;">
    <t-form :data="formData" :rules="rules" ref="form" label-align="top">
      <t-form-item label="产品分类" name="classify_id">
        <t-select v-model="formData.classify_id" :options="classifyOptions" placeholder="请选择产品分类"></t-select>
      </t-form-item>
      <t-form-item label="产品品牌" name="brand_id">
        <t-select v-model="formData.brand_id" :options="brandOptions" placeholder="请选择产品品牌"></t-select>
      </t-form-item>
      <!--<t-form-item label="产品标题" name="title">-->
      <!--  <t-input v-model="formData.title" placeholder="请输入产品标题"></t-input>-->
      <!--</t-form-item>-->
      <!--<t-form-item label="产品名称（短标题）" name="name">-->
      <!--  <t-input v-model="formData.name" placeholder="请输入产品名称（短标题）"></t-input>-->
      <!--</t-form-item>-->
      <!--<t-form-item label="产品编号" name="sn">-->
      <!--  <t-input v-model="formData.sn" placeholder="请输入产品编码"></t-input>-->
      <!--</t-form-item>-->
      <!--<t-form-item label="排序" name="sort">-->
      <!--  <t-input-number v-model="formData.sort" style="width: 220px;" placeholder="输入排序"></t-input-number>-->
      <!--</t-form-item>-->
      <t-form-item label="状态" name="status">
        <t-radio-group v-model="formData.status" :options="statusOptions"></t-radio-group>
      </t-form-item>
    </t-form>
  </div>
</template>

<script>
import UploadImg from '@/components/upload-img/index.vue';
import {classifyListApi} from "@/api/classify";

export default {
  name: 'BaseInfo',
  components: {
    UploadImg,
  },
  props: {
    product: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      formData: {
        brand_id: '', // 品牌
        classify_id: '', // 分类
        title: '', // 标题
        name: '', // 名称
        sn: '', // 编号
        sort: 999, // 排序
        status: 1, // 状态
      },
      rules: {
        //brand_id: [{ required: true, message: '请选择产品品牌', trigger: 'change' },],
        //classify_id: [{ required: true, message: '请选择产品分类', trigger: 'change' },],
        //title: [{ required: true, message: '请输入产品标题', trigger: 'blur' },],
        //name: [{ required: true, message: '请输入产品名称（短标题）', trigger: 'blur' },],
        //sn: [{ required: true, message: '请输入产品编号', trigger: 'blur' },],
        //sort: [{ required: true, message: '请输入排序', trigger: 'blur' },],
        //status: [{ required: true, message: '请选择状态', trigger: 'change' },],
      },
      brandOptions: [], // 品牌
      classifyOptions: [],  // 分类
      statusOptions: [
        //（-1 作废；0 下架；1 上架）
        { label: '上架', value: 1 },
        { label: '下架', value: 0 },
        { label: '作废', value: -1 },
      ],
    }
  },
  mounted() {
    this.getClassifyList()
  },
  methods: {
    submit() {
      return  this.$refs.form.validate()
    },
    getClassifyList() {
      const params1 = {
        page: 1,  // 当前页
        limit: 9999,  // 每页条数
        belong_module: 'product_classify', // 模块类型（如产品分类 product_classify，品牌 product_brand，发货说明 product_deliver，保障说明 product_safeguard ...）
      }
      classifyListApi(params1).then(res=> {
        this.classifyOptions = res.data.map(item=> ({ label: item.title, value: item.id }))
      }).catch(err=> {
        console.log('err', err)
      })
      const params2 = {
        page: 1,  // 当前页
        limit: 9999,  // 每页条数
        belong_module: 'product_brand', // 模块类型（如产品分类 product_classify，品牌 product_brand，发货说明 product_deliver，保障说明 product_safeguard ...）
      }
      classifyListApi(params2).then(res=> {
        this.brandOptions = res.data.map(item=> ({ label: item.title, value: item.id }))
      }).catch(err=> {
        console.log('err', err)
      })
    }
  }
}
</script>

<style lang="less" scoped>

</style>
